import { useDispatch, useSelector } from "react-redux";
import { addToCart } from "./actions";

export const ShoppingCartRedux = () => {
  // 使用useDispatch Hook获取Redux的dispatch函数，用于分发action。
  const dispatch = useDispatch();
  // 使用useSelector Hook从Redux store中选择cart部分的items数组。
  const items = useSelector((state: { cart: { items } }) => state.cart.items);

  return (
    <div>
      {/* 当点击时，会调用dispatch函数分发addToCart action。 */}
      <button onClick={() => dispatch(addToCart({ id: 1, name: "华为手机" }))}>
        加入购物车
      </button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
